<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2023/10/5
  Time: 19:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>全部博客</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .allblog-body {
            position: relative;
            top: 0px;
            left: 0px;
            width: 1150px;
            height: 900px;
            overflow: hidden;
        }

        .blogs {
            width: 950px;
            margin: 5px auto;
        }

        .blog {
            width: 950px;
            height: 120px;
            box-shadow: 0px 0px 11px -2px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .bottom {
            width: 500px;
            height: 60px;
            margin: 0px auto;

        }

        .bottom a {
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            margin: 10px;
            text-align: center;
            line-height: 40px;
            color: #f6f5f7;
            font-family: "思源黑体";
            text-decoration: none;
            font-size: 17px;
            background-color: #16BAAA;
            border-radius: 5px;
            box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .bottom a:hover {
            color: #f6f5f7;
            background-color: #30bdb0;
        }

        .btit {
            width: 900px;
            margin-top: 10px;
            margin-left: 25px;
            height: 30px;
            font-family: "思源黑体";
            color: #0F2027;
            text-align: left;
            line-height: 30px;
            font-size: 20px;
            font-weight: bolder;
        }

        .bcon {
            width: 600px;
            margin-top: 5px;
            margin-left: 25px;
            margin-bottom: 5px;
            height: 30px;
            font-family: "思源黑体";
            color: #0F2027;
            line-height: 30px;
            font-size: 15px;
            overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/
            text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
            white-space: nowrap;
        }

        .binfo {
            width: 900px;
            margin-top: 5px;
            margin-left: 25px;
            margin-bottom: 5px;
            height: 30px;
            font-family: "思源黑体";
            color: #303538;
        }

        .bauthor {
            width: 150px;
            height: 30px;
            text-align: left;
            line-height: 30px;
            font-size: 14px;
            float: left;
        }

        .btime {
            width: 250px;
            height: 30px;
            text-align: left;
            line-height: 30px;
            margin-left: 5px;
            font-size: 14px;
            float: left;
        }

        .bcom {
            width: 90px;
            height: 30px;
            text-align: left;
            line-height: 30px;
            margin-left: 5px;
            font-size: 14px;            float: left;
        }

        .bcao {
            width: 90px;
            height: 30px;
            text-align: left;
            line-height: 30px;
            margin-right: 25px;
            float: right;
        }

        .bcao button {
            font-size: 20px;
            margin-left: 10px;
            border-radius: 3px;
        }

    </style>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>

<c:if test="${blogs == null}">
    <script>
        window.location.href="${pageContext.request.contextPath}/blog/split_blog.action?page=1"
    </script>
</c:if>

<div class="allblog-body">
    <c:choose>
        <c:when test="${blogs.list.size() != 0 }">
            <div class="blogs">
                <c:forEach items="${blogs.list}" var="blog">
                    <div class="blog">
                        <div class="btit">
                                ${blog.btitle}
                        </div>
                        <div class="bcon">
                                ${blog.bcontent}
                        </div>
                        <div class="binfo">
                            <div class="bauthor">
                                <i class="layui-icon layui-icon-username"></i> 作者 ${blog.user.uname}
                            </div>
                            <div class="btime">
                                <i class="layui-icon layui-icon-time"></i> 发布时间 ${blog.btime}
                            </div>
                            <div class="bcom">
                                <i class="layui-icon layui-icon-dialogue"></i> 评论数 ${blog.commentList.size()}
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>


            <div class="bottom">
                <c:if test="${blogs.pageNum == 1}">
                    <a style="pointer-events: none">首页</a>
                    <a style="pointer-events: none">上一页</a>
                </c:if>
                <c:if test="${blogs.pageNum > 1}">
                    <a href="${pageContext.servletContext.contextPath}/blog/split_user.action?page=1">首页</a>
                    <a href="${pageContext.servletContext.contextPath}/blog/split_user.action?page=${blogs.prePage}">上一页</a>
                </c:if>

                <a href="#">${blogs.pageNum} / ${blogs.pages}</a>

                <c:if test="${blogs.pageNum == blogs.pages}">
                    <a style="pointer-events: none">下一页</a>
                    <a style="pointer-events: none">尾页</a>
                </c:if>
                <c:if test="${blogs.pageNum < blogs.pages}">
                    <a href="${pageContext.servletContext.contextPath}/blog/split_user.action?page=${blogs.nextPage}">下一页</a>
                    <a href="${pageContext.servletContext.contextPath}/blog/split_user.action?page=${blogs.pages}">尾页</a>
                </c:if>

            </div>
        </c:when>
        <c:otherwise>
            <div>
                <h2 style="width:1000px;font-size: 40px; text-align: center;color: #7e7c7b;margin: 100px auto">
                    还没有文章。。。</h2>
            </div>
        </c:otherwise>
    </c:choose>

</div>
</body>
</html>
